<template>
  <div class="star" :class="'star-' + size" >
       <span class="star-item" v-for="(st,index) in starArr" :key="index" :class="st"></span>
       
   </div>
</template>

<script>
const CLASS_ON = 'on'
const CLASS_HALF = 'half'
const CLASS_OFF = 'off'
export default {
    props:{
        score:Number,
        size:Number
    },
    data () {
        return {
            
        }
    },
    computed:{
        starArr(){
            const {score} = this
            const scs = []
            const scoreInt = Math.floor(score)
            for(let i = 0;i<scoreInt;i++){
                scs.push(CLASS_ON)
            }
            if(score*10 - scoreInt*10 >=5){
                scs.push(CLASS_HALF)
            }
            while(scs.length<5){
                scs.push(CLASS_OFF)
            }

            return scs
        }
    }
}
</script>

<style lang="less" scoped>
.star{
    .star-item{
        display: inline-block;
        background-repeat: no-repeat;
    }
    &.star-24{
        .star-item{
            width: 10px;
            height: 10px;
            margin-right: 3px;
            background-size: 10px 10px;
            &:last-child{
                margin-right: 0;
            }
            &.on{
                background-image: url('./stars/star24_on@2x.png');
            }
            &.half{
                background-image: url('./stars/star24_half@2x.png');
            }
            &.off{
                background-image: url('./stars/star24_off@2x.png');
            }
        }
    }
    &.star-36{
            .star-item{
                width: 15px;
                height: 15px;
                margin-right: 6px;
                background-size: 15px 15px;
                &:last-child{
                    margin-right: 0;
                }
                &.on{
                    background-image: url("./stars/star36_on@2x.png");
                }
                &.half{
                    background-image: url('./stars/star36_half@2x.png');
                }
                &.off{
                    background-image: url('./stars/star36_off@2x.png');
                }
            }
        }
        &.star-48{
            .star-item{
                width: 20px;
                height: 20px;
                margin-right: 22px;
                background-size: 20px 20px;
                &:last-child{
                    margin-right: 0;
                }
                &.on{
                    background-image: url('./stars/star48_on@3x.png');
                }
                &.half{
                    background-image: url('./stars/star48_half@3x.png');
                }
                &.off{
                    background-image: url('./stars/star48_off@3x.png');
                }
            }
        }
}
</style>